<template>
  <el-card class="box-card">
    <template #header>
      <div class="flex align-center justify-between">
        <span>属性面板</span>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </div>
    </template>
    <div v-for="item in templates.list" :key="item.id">
      <div v-if="item.id === templates.checkedId">
        <NavBarProps
          v-if="item.componentName === 'HyNavBar'"
          :defaultProps="item.defaultProps"
        ></NavBarProps>
        <SearchProps
          v-else-if="item.componentName === 'HySearch'"
          :defaultProps="item.defaultProps"
        ></SearchProps>
      </div>
    </div>
  </el-card>
</template>

<script>
import { FactoryStore } from '@/hooks';
import { GET_SHOP_DECORATION } from '@/utils/Const';
import { ref } from 'vue';
import NavBarProps from './NavBarProps';
import SearchProps from './SearchProps';
export default {
	components : {
		SearchProps,
		NavBarProps
	},
	setup () {
		let { getter } = FactoryStore({
			namespaced : 'shopDecoration',
			gettersMethod : [GET_SHOP_DECORATION]
		});
		let templates = ref(getter[GET_SHOP_DECORATION].value.mobile);
		let onSubmit = () => {
			console.log('onSubmit');
		};
		return {
			onSubmit,
			templates
		};
	}
};
</script>
